<template>
  <view class="search" :class="{focused: isSearch}">
    <view class="sinput">
      <input
				@confirm="goResult"
				type="text" @input="throtteInput" v-model="keyword" @focus="hFocus" placeholder="搜索" />
      <button @click="hCancel">取消</button>
    </view>
    <!-- 搜索状态显示 下边内容 -->
    <view class="scontent" v-show="isSearch">
			<block v-if="result.length === 0">
				<div class="title">
					搜索历史
					<span class="clear"></span>
				</div>
				<!-- 搜索历史 -->
				<div class="history">
					<navigator
					 v-for="(item,index) in historyKeywords"
					 :key="index"
					 :url="'/pages/list/index?query='+item">{{item}}</navigator>
				</div>
			</block>
      <!-- 结果 -->
      <scroll-view v-else scroll-y class="result">
        <navigator
				v-for="item in result"
				:key="item.goods_id" 
				:url="'/packone/goods/index?id=' + item.goods_id">{{item.goods_name}}</navigator>

      </scroll-view>
    </view>
  </view>
</template>

<script>
const debounce = function (fn, t = 500) {
	let timerId = null
	return function(...arg) {
		clearTimeout(timerId)
		timerId = setTimeout(()=> {
			fn.apply(this,arg)
		}, t)
	}
}

const throtte = function (fn, t = 50) {
	let timerId = null
	return function(...arg) {
		if(timerId) return ;
		
		timerId = setTimeout(()=> {
			fn.apply(this,arg)
			timerId = null
		}, t)
	}
}
export default {
	data() {
		return {
			result: [],
			isSearch: false,
			keyword: '', // 关键字
			historyKeywords: uni.getStorageSync('history')  || []
		}
	},
	created() {
		this.debounceInput = debounce(this.hInput , 300)
		this.throtteInput = throtte(this.hInput , 300)
	},
	methods:{
		goResult() {
			this.historyKeywords.push(this.keyword)
			
			uni.setStorage({
				key: "history",
				data: this.historyKeywords
			})
			
		  uni.navigateTo({
		    url: "/packone/list/index?query="+this.keyword
		  });
		},
		async hInput(e) {
			if (!this.keyWord) {
				return this.result = []
			}
			const {data} = await this.$request({url: 'goods/qsearch', data:{query: this.keyword}})
			this.result = data
		},
		// hInput1: debounce(function(){ this.hInput() }, 300),
		// hInput1: debounce(this.hInput, 300).call(this),
		hFocus(){
			this.isSearch = true
		   const pageHeight = uni.getSystemInfoSync().windowHeight + "px";
		   uni.hideTabBar();
		   this.$emit("search", pageHeight);
		},
		hCancel(){
			this.isSearch = false;
			uni.showTabBar();
			this.$emit("search", "auto");
		}
	}
}
</script>

<style lang="scss" scoped>
// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      // display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>